<template>
    <el-card class="box-card">
        <div class="text item">
            <div class="select_one">
                <table style="float: left; margin-right: 50px">
                    <tr>
                        <td>订单号</td>
                        <td><el-input v-model="condition.id" placeholder="请输入内容"></el-input></td>
                    </tr>
                    <tr>
                        <td>菜品名称</td>
                        <td><el-input v-model="condition.footName" placeholder="请输入内容"></el-input></td>
                    </tr>
                </table>
                <table>
                    <tr>
                        <td>下单时间</td>
                        <td> <el-date-picker
                                v-model="value2"
                                type="datetimerange"
                                :picker-options="pickerOptions"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                align="right">
                        </el-date-picker></td>
                    </tr>
                    <tr>
                        <td>订单状态</td>
                        <td><el-select v-model="condition.state" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select></td>
                    </tr>
                    <tr>
                        <td>  <el-button type="primary" @click="selectByCondition()">筛选</el-button></td>
                        <td></td>
                    </tr>
                </table>
            </div>
            <div>
                <el-tabs type="border-card"  v-model="condition.state" @tab-click="handleClick">
                    <el-tab-pane v-for="item in options" :name="item.value" :label="item.label">
                        <el-table
                                :data="datas"
                                style="width: 100%">
                            <el-table-column type="expand">
                                <template slot-scope="props">
                                    <el-table
                                            :data="props.row.takeoutFoods"
                                            stripe
                                            border
                                            style="width: 100%">
                                        <el-table-column
                                                prop="food.name"
                                                label="菜品"
                                                width="180">
                                        </el-table-column>
                                        <el-table-column
                                                prop="food.price"
                                                label="单价"
                                                width="180">
                                        </el-table-column>
                                        <el-table-column
                                                prop="count"
                                                label="数量">
                                        </el-table-column>
                                    </el-table>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="订单ID"
                                    prop="id">
                            </el-table-column>
                            <el-table-column
                                    label="结账时间"
                                   >
                                <template slot-scope="scope">
                                    <i class="el-icon-time"></i>
                                    <span style="margin-left: 10px">{{ scope.row.orderTime }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="总金额"
                                    prop="totalPrice">
                            </el-table-column>
                            <el-table-column
                                    label="状态"
                                    >
                                <template slot-scope="scope">
                                    <el-tag
                                            :type="scope.row.state === '待取餐' ? 'primary' : 'success'"
                                            disable-transitions>{{scope.row.state}}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="取餐时间"
                                   >
                                <template slot-scope="scope">
                                    <i class="el-icon-time"></i>
                                    <span style="margin-left: 10px">{{ scope.row.takeTime }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
                                    <el-button type="primary" icon="el-icon-edit" circle size="mini"></el-button>
                                </el-tooltip>
                                <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                                            <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="open"></el-button>
                                </el-tooltip>
                            </el-table-column>
                        </el-table>


                    </el-tab-pane>
                    <el-pagination
                            @size-change="pagesize_s"
                            @current-change="page"
                            background
                            :current-page="condition.currPage"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="20"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="count"
                    >
                    </el-pagination>
                </el-tabs>

            </div>
        </div>
    </el-card>
</template>

<script>
    import moment from 'moment'
    export default {
        name: "Takeout",
        data(){
            return{
                /*查询条件*/
                condition:{
                    currPage: 1,
                    pageSize: 20,
                    id:'',
                    state:'全部',
                    footName:'',
                    timeOne:'',
                    timeTwo:'',
                },
                visible: false,
                datas:[],
                /*总条数*/
                count: 1,
                options: [{
                    value: '全部',
                    label: '全部'
                }, {
                    value: '待取餐',
                    label: '待取餐'
                }, {
                    value: '已取餐',
                    label: '已取餐'
                }],
                value: '',

                value2: '',
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
            }
        },
        methods:{
            open() {
                this.$confirm('是否删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    closeOnClickModal:false
                }).then(() => {

                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            selectByCondition(){
                console.log(this.value2)
                if (this.value2 != ""){
                    let text = this.value2.toString();
                    this.condition.timeOne = new Date(text.split(",")[0]).format("yyyy/MM/dd HH:mm:ss");
                    this.condition.timeTwo = new Date(text.split(",")[1]).format("yyyy/MM/dd HH:mm:ss");
                }

                this.response();
            },
            handleClick(tab, event) {
                this.response();
            },
            page(curr){
                this.condition.currPage =curr;
                this.response();
            },
            pagesize_s(size){
                this.condition.pageSize = size;
                this.response();
            },
            response(){
                let _this = this;
                this.$axios.post('/take/show',this.condition)
                    .then(function (response) {
                        console.log(response);
                        _this.datas = response.data.datas;
                        _this.count = response.data.count;
                        _this.datas.forEach(d=>{
                            d.orderTime = d.orderTime == null?'':moment(d.orderTime).format("YYYY-MM-DD HH:mm:ss");
                            d.takeTime = d.takeTime == null?'':moment(d.takeTime).format("YYY-MM-DD HH:mm:ss")
                        })

                    })
            }
        },
        created() {
            this.response();
        }
    }
</script>

<style scoped>

</style>
